<script setup></script>
<template>
	<!-- <router-view v-slot="{ Component,route}">
    <component :is="Component" :key="`${route.name}-sub`"/>
  </router-view> -->
  <div id="Home">
	<div class="content-box">
		<div class="info-box">
			<div class="img-box"><img src="../../assets/images/tp-av.png" /></div>
			<div class="left">
				<div class="qyname">江西医至初病理诊断管理</div>
				<div class="username">医至初管理员1</div>
				<div class="time">到期时间：2099-9-19</div>
			</div>
		</div>
		<div class="account">
			<div class="title">其他账号</div>
			<div class="number">2个</div>
		</div>
		<div class="receive">
			<div class="number">531/598</div>
			<div class="tip">接诊量/预约量（位）</div>
		</div>
		<div class="receive">
			<div class="number">531/598</div>
			<div class="tip">成交额/交易额（万元）</div>
		</div>
		<div class="consumption">
			<div class="number">598</div>
			<div class="tip">人均消费（元）</div>
		</div>
	</div>
	<div class="content-bottom">
		<div class="echart">
			<div class="echart-box">
				<div class="top-title">医生状态</div>
				<div ref="doctorChart" style="width: 410px; height: 305px;"></div>
			</div>
			<div class="echart-box echart-box1">
				<div class="top-title" style="margin-left: 0;">主要类型</div>
				<div class="totality">
					<div>预约总数：452215 人</div>
					<div>已接诊数：5215 人</div>
					<div>待接诊数：52215 人</div>
				</div>
				<div class="type-box">
					<div class="progress-box">
						<el-progress type="circle" show-text :percentage="10" :width='100' :stroke-width="15"
							stroke-linecap="square" define-back-color="#E8E8E8" color="#3e82f4"></el-progress>
						<div class="title">妇科病理</div>
					</div>
					<div class="progress-box">
						<el-progress type="circle" show-text :percentage="10" :width='100' :stroke-width="15"
							stroke-linecap="square" define-back-color="#E8E8E8" color="#f2a53a"></el-progress>
						<div class="title">乳腺病理</div>
					</div>
					<div class="progress-box">
						<el-progress type="circle" show-text :percentage="10" :width='100' :stroke-width="15"
							stroke-linecap="square" define-back-color="#E8E8E8" color="#af2cf3"></el-progress>
						<div class="title">淋巴造血</div>
					</div>
					<div class="progress-box">
						<el-progress type="circle" show-text :percentage="10" :width='100' :stroke-width="15"
							stroke-linecap="square" define-back-color="#E8E8E8" color="#58b99d"></el-progress>
						<div class="title">消化系统</div>
					</div>
					<div class="progress-box">
						<el-progress type="circle" show-text :percentage="10" :width='100' :stroke-width="15"
							stroke-linecap="square" define-back-color="#E8E8E8" color="#255115"></el-progress>
						<div class="title">其他类别</div>
					</div>
				</div>
				<!-- 	  <el-progress type="circle" :percentage="25"></el-progress>
		  <el-progress type="circle" :percentage="100" status="success"></el-progress>
		  <el-progress type="circle" :percentage="70" status="warning"></el-progress>
		  <el-progress type="circle" :percentage="50" status="exception"></el-progress> -->
			</div>
			<div class="echart-box">
				<div class="top-title">随访满意度</div>
				<div ref="satisfactionChart" style="width: 410px; height: 355px;"></div>
			</div>
			<div class="echart-box echart-box1">
				<div style="display: flex;justify-content: space-between;align-self: center;">
					<div class="top-title">严重病情</div>
					  <el-date-picker
					      v-model="value3"
					      type="year"
					      placeholder="选择年度">
					    </el-date-picker>
				</div>
				
				<div ref="chartRef" style="width: 510px; height: 355px;"></div>
			</div>
		</div>
		<!-- 接诊排名 -->
		<div class="rank-box">
			<div class="top-title" style="margin-left: 0;">接诊排名</div>
			<div class="rank-type">
				<div v-for="(item,index) in titleList" :class="index==selectIndex?'selectActive':''" @click="selectItem(index)">{{item}}</div>
				<!-- <div>昨日</div>
				<div>近7日</div> -->
			</div>
			<div class="rank-num">
				<div class="rank2">排名</div>
				<div class="rank1">接诊省份</div>
				<div class="rank1">接诊人数</div>
			</div>
			<div class="rank-num" v-for="(item,index) in 10">
				<div class="rank2 rank3 rank4" :class="'ranknum'+index">{{index+1}}</div>
				<!-- :class="index==0?'ranknum':index==1?'ranknum1':index==2?'ranknum2':''" -->
				<div class="rank1 rank3">12</div>
				<div class="rank1 rank3">22</div>
			</div>
		</div>
	</div>
	</div>
</template>
<script setup>
	import * as echarts from 'echarts';
	import {
		onMounted,
		ref,
		reactive,
		toRefs
	} from 'vue';
const state = reactive({
    titleList:['今日','昨日','近七日'],
	selectIndex:0
})
	const chartRef = ref(null)
	const satisfactionChart = ref(null)
	const doctorChart = ref(null)
	//医生状态
	const getdoctorChart = () => {
		const chart = echarts.init(doctorChart.value);
		const option = {
			// title: {
			//   text: '',
			//   // left: 20,
			//   // top: 20
			// },
			grid: {
				top: '20%',
				left: '3%',
				right: '6%',
				bottom: '3%',
				containLabel: true // 距离是包含坐标轴上的文字
			},
			xAxis: {
				type: 'value'
			},
			yAxis: {
				type: 'category',
				data: ['在线中', '离线中', '已离职', ],
				axisTick: {
					show: false // 不显示y轴刻度
				},
				axisLine: {
					show: false // 不显示轴线
				},
			},
			// xAxis: {
			// 	type: 'category',
			// 	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			// },
			tooltip: {
				trigger: 'axis',
				// axisPointer: {
				//   type: 'line',
				//   z: 0,
				//   lineStyle: {
				//     color: '#2D3443'
				//   }
				// }
			},
			series: [{
				type: 'bar',
				label: {
					show: true,
					position: 'right',
					textStyle: {
						color: 'white'
					}
				},
				// itemStyle: {
				//   // 指明颜色渐变的方向
				//   // 指明不同百分比之下颜色的值
				//   color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
				//     // 百分之0状态之下的颜色值
				//     {
				//       offset: 0,
				//       color: '#5052EE'
				//     },
				//     // 百分之100状态之下的颜色值
				//     {
				//       offset: 1,
				//       color: '#AB6EE5'
				//     }
				//   ])
				// }
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: '#82D1F6'
						},
						{
							offset: 0.5,
							color: '#29B6F4'
						},
						{
							offset: 1,
							color: '#0089CD'
						}
					]),
					borderRadius: [0, 10, 10, 0]
				},
				barWidth: '20',
				data: [120, 200, 150, 80, 70, 110, 130],
				//      {
				//        data: [120, 200, 150, 80, 70, 110, 130],
				//        type: 'bar',
				//        barWidth: '60%'
				//      }
			}]
		}
		chart.setOption(option);
	}
	//满意度
	const satisfaction = () => {
		const chart = echarts.init(satisfactionChart.value);
		const option = {
			title: {
				text: ''
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['不满意', '满意']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				// feature: {
				// 	saveAsImage: {}
				// }
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
					name: '不满意',
					type: 'line',
					smooth: true,
					stack: '总量',
					data: [120, 132, 101, 134, 90, 230, 210]
				},
				{
					name: '满意',
					type: 'line',
					smooth: true,
					stack: '总量',
					data: [220, 182, 191, 234, 290, 330, 310]
				}
			]
		};
		chart.setOption(option);
	}
	//病情图
	const getillness = () => {
		const chart = echarts.init(chartRef.value);
		const option = {
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisLine: {
					show: false // 不显示轴线
				},
				axisTick: {
					show: false // 不显示y轴刻度
				},
			},
			yAxis: {
				type: 'value'

			},
			series: [{
				data: [120, 100, 150, 80, 70, 110, 130],
				type: 'bar',
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#82D1F6'
						},
						{
							offset: 0.5,
							color: '#29B6F4'
						},
						{
							offset: 1,
							color: '#0089CD'
						}
					]),
					borderRadius: [10, 10, 0, 0]
				},
				barWidth: '20',
			}]
		};
		chart.setOption(option);
	}
	const selectItem=(index)=>{
		state.selectIndex=index
	}
	onMounted(() => {
		getdoctorChart()
		satisfaction()
		getillness()
	});
	const {titleList,selectIndex} = toRefs(state)
</script>
<style scoped lang="scss">
	#Home{
		background-color: #fff;
		height: calc(100ch - 54px);
	}
	.content-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.info-box {
		display: flex;
		justify-content: flex-start;
		align-items: self-start;
		position: relative;
		width: 440px;
		height: 100px;

		.img-box {
			height: 100px;
			width: 100px;

			img {
				height: 80px;
				width: 80px;
			}
		}

		.qyname {
			color: rgb(16, 16, 16);
			font-size: 20px;
			font-weight: 600;
		}

		.username {
			color: #999;
			font-size: 18px;
		}

		.time {
			color: rgb(16, 16, 16);
			font-size: 18px;
		}
	}

	.info-box::after,
	.account::after,
	.receive::after {
		content: "";
		display: block;
		height: 20px;
		width: 2px;
		background-color: #BBB;
		// margin-left: -2px; 
		position: absolute;
		top: 40px;
		right: 0;

	}

	.account {
		position: relative;
		width: 240px;
		height: 100px;
		text-align: center;

		.title {
			color: rgb(16, 16, 16);
			font-size: 18px;
			font-weight: 600;
			margin-top: 10px
		}

		.number {
			color: rgb(16, 16, 16);
			font-size: 20px;
		}
	}

	.receive,
	.consumption {
		position: relative;
		width: 240px;
		height: 100px;
		text-align: center;

		.tip {
			color: rgb(0, 0, 0);
			font-size: 14px;
			font-weight: 500;
		}

		.number {
			color: rgba(255, 98, 94, 1);
			font-size: 36px;
			font-weight: 600;
		}
	}

	.consumption {
		width: 200px;
	}

	.content-bottom {
		display: flex;
		justify-content: flex-start;
		margin-top: 30px;
	}

	.echart {
		width: 940px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.echart-box1 {
		width: 510px;
		margin-left: 17px;
	}

	.top-title {
		color: rgb(16, 16, 16);
		font-size: 16px;
		font-weight: 600;
		padding-left: 10px;
		position: relative;
		margin-left: 20px;
	}

	.top-title::after {
		content: "";
		display: block;
		height: 28px;
		width: 4px;
		border-radius: 10px;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
		position: absolute;
		left: 0;
		top: 0px;
	}

	.echart-box {
		position: relative;
		width: 410px;
		height: 355px;
	}

	.totality {
		color: rgb(16, 16, 16);
		font-size: 14px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 32px;
		margin-bottom: 44px;
	}

	.type-box {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.progress-box {
			text-align: center;

			.title {
				color: rgb(16, 16, 16);
				font-size: 16px;
			}
		}
	}

	.rank-box {
		flex: 1;

		.rank-type {
			display: flex;
			justify-content: flex-start;
			color: rgba(147, 147, 147, 1);
			font-size: 16px;
			margin-top:10px;
			margin-bottom:10px;
			cursor: pointer;
			div {
				margin-right: 10px;
			}
			.selectActive{
				color: rgb(0,0,0);
				font-size: 16px;
				font-weight: 600;
			}
		}
		.rank-num{
			display: flex;
			justify-content: flex-start;
			color: rgb(0,0,0);
			font-size: 16px;
			font-weight: 600;
			.rank1,.rank2 {
				width: 80px;
				text-align: center;
				// margin-right: 20px;
				font-weight: 600;
			}
			.rank2{
				width: 40px;
			}
			.rank3{
				margin-top: 30px;
			}
			.rank4{
				color: rgba(0,0,0,1);
				font-size: 16px!important;
				font-weight: 400!important;
			}
			.ranknum0{
				color: rgba(255,98,94,1);
			}
			.ranknum1{
				color: rgba(242,169,60,1);
			}
			.ranknum2{
				color: rgba(255,203,36,1);
			}
			.ranknum3{
				color: rgba(0,187,127,1);
			}
			.ranknum4{
				color: rgba(0,187,127,1);
			}
		}
	}
</style>